<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <div style="background: #fff; padding: 13px 15px;">
            <span :class="[state.order_type == '' ? 'btn btn-info' : 'btn']" @click="changeType('')">{{ t('全部') }}</span>
            <span :class="[state.order_type == '出口' ? 'btn btn-info ml-12' : 'btn ml-12']" @click="changeType('出口')">{{ t('出口') }}</span>
            <span :class="[state.order_type == '进口' ? 'btn btn-info ml-12' : 'btn ml-12']" @click="changeType('进口')">{{ t('进口') }}</span>
            <span :class="[state.order_type == '内销' ? 'btn btn-info ml-12' : 'btn ml-12']" @click="changeType('内销')">{{ t('内销') }}</span>
        </div>

        <div style="background: #fff; padding: 13px 15px; padding-top: 0;" class="bbb">
            <span :class="[state.activeCustomer == 0 ? 'btn btn-info' : 'btn']" @click="state.activeSupplier = 0; changeCustomer(0)">{{ t('全部') }}</span>
            <span v-for="(item, index) in state.customer" :key="index" class="customer-span">
                <span v-if="state.order_type == '' || item.type.indexOf(state.order_type) > -1" @click="state.activeSupplier = 0; changeCustomer(item.id)" :class="[state.activeCustomer == item.id ? 'btn btn-info ml-12' : 'btn ml-12']">{{ item.corp_name_ko }}</span>
            </span>
        </div>

        <div style="background: #fff; padding: 13px 15px; padding-top: 0;" class="aaa" v-if="state.activeCustomer > 0">
            <span :class="[state.activeSupplier == 0 ? 'btn btn-supplier mr-12' : 'btn mr-12']" @click="changeSupplier(0)" style="margin-bottom: 10px;">{{ t('全部') }}</span>
            <span v-for="(item, index) in state.supplier" :key="index" class="customer-span">
                <span @click="changeSupplier(item.id)" :class="[state.activeSupplier == item.id ? 'btn btn-supplier mr-12' : 'btn mr-12']" style="margin-bottom: 10px;">{{ item.corp_name_cn }}</span>
            </span>
        </div>

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader :buttons="['add']" :quick-search-placeholder="t('搜索')">

            <template #btnBefore>
                <!-- <el-select v-model="state.search.invoice_status" style="width: 180px;" @change="searchInvoiceStatus" clearable :placeholder="t('开票状态')">
                    <el-option :label="t('未开票')" value="n" />
                    <el-option :label="t('已开票')" value="y" />
                </el-select> -->
                <el-date-picker
                    v-model="state.search.create_time"
                    type="date"
                    :placeholder="t('请选择') + t('下单时间')"
                    @change="inputKeyword"
                />
                <el-input v-model="state.search.keyword" placeholder="" class="ml-12" style="width: 180px;" clearable @input="inputKeyword" />
                
            </template>
            <slot name="btnBefore">
                
                <span class="btn btn-info ml-12" @click="showBatch">{{ t('批量下单') }}</span>
                <span :class="[baTable.table.selection!.length > 0 ? 'btn ml-12' : 'btn ml-12 disabled']" @click="download">{{ t('资料下载') }}</span>
            </slot>
        </TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        
        <Table ref="tableRef">

            <template #trade_type>
                <el-table-column :label="t('订单号')" align="center" width="110">
                    <template #default="scope">
                        <!-- <el-link @click="router.push({path: '/system/customer_order/detail', query: {id: scope.row.id}})" style="font-size: 13px;" class="contract"> -->
                        <el-link @click="state.clickContractId = scope.row.id" style="font-size: 13px;" class="contract">
                            <span style="display: block;" v-if="!scope.row.contract">{{ scope.row.out_trade_no }}</span>
                            <span style="display: block;">{{ scope.row.contract }}<span v-if="scope.row.batch > 0">({{ scope.row.batch }})</span>
                            </span>
                        </el-link>
                        <div class="btn btn-mini" style="margin-top: 5px;" @click="openInformation(scope.row)">{{ t('资料管理') }}</div>
                    </template>
                </el-table-column>
            </template>
            
            <template #order_type>
                <el-table-column :label="t('订单类型')" align="center" width="115">
                    <template #default="scope">
                        <div>{{ t(scope.row.order_type) }}({{ t(scope.row.trade_type) }})</div>
                    </template>
                </el-table-column>
            </template>

            <template #customer_supplier>
                <el-table-column :label="t('客户名')" align="center" width="110">
                    <template #default="scope">
                        <el-link @click="changeCustomer(scope.row.customer.id)" style="font-size: 13px;" class="contract">
                            <span style="display: block;">{{ scope.row.customer.corp_name_ko }}</span>
                        </el-link>
                        <el-tooltip v-if="scope.row.product_category" class="box-item" effect="dark" :content="scope.row.supplier.corp_name_cn" placement="top">
                            <el-tag type="info" style=" cursor: pointer;" @click="handleRowContextmenu(scope.row.id)">{{ scope.row.product_category }}</el-tag>
                        </el-tooltip>
                        <el-tooltip v-else class="box-item" effect="dark" :content="t('点击设置')" placement="top">
                            <el-tag type="info" style=" cursor: pointer;" @click="handleRowContextmenu(scope.row.id)">{{ t('订单明细') }}</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </template>
            
            <template #status>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column :label="t('操作')" align="center" width="150" class-name="business-name" height="200">
                    <template #default="scope">
                        <div v-if="scope.row.user_id > 0">
                            <div>
                                <div class="btn ml-0 mt-0" @click="add(scope)">{{ t('添加') }}</div>
                            </div>
                            <div :class="[scope.row.status.includes('1') ? 'btn btn-info ml-0 mt-5' : 'btn ml-0 mt-5']" @click="setStatus(scope.row.id, 1, scope.row)">{{ t('成交') }}</div>
                            <div :class="[scope.row.status.includes('0') ? 'btn btn-info mt-5 ml-5' : 'btn mt-5 ml-5']" @click="setStatus(scope.row.id, 0, scope.row)">{{ t('终止') }}</div>
                            <div class="btn ml-0 mt-5" @click="edit(scope)">{{ t('编辑') }}</div>
                            <el-popconfirm :title="t('确定要删除这条数据吗') + '?'" @confirm="del(scope)">
                                <template #reference>
                                    <div class="btn ml-5 mt-5">{{ t('删除') }}</div>
                                </template>
                            </el-popconfirm>
                        </div>
                        <div v-if="scope.row.user_id == 0">
                            <div class="btn ml-0 mt-0" @click="add(scope)">{{ t('添加') }}</div>
                            <div v-if="scope.row.user_id == 0" :class="[scope.row.status.includes('1') ? 'btn btn-info mt-0 ml-5' : 'btn mt-0 ml-5']" @click="setStatus(scope.row.id, 1, scope.row)">{{ t('完成') }}</div>
                            <div class="btn ml-0 mt-5" @click="edit(scope)">{{ t('编辑') }}</div>
                            <el-popconfirm :title="t('确定要删除这条数据吗')" @confirm="del(scope)">
                                <template #reference>
                                    <div class="btn ml-5 mt-5">{{ t('删除') }}</div>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </template>
            <template #files>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column :label="t('附加文件')" align="center" min-width="120">
                    <template #default="scope">
                        <div style="height: 120px; overflow: auto;">
                            <el-link :href="item.url" target="_blank" class="tag" style="margin-top: 5px;" v-for="(item, index) in scope.row.files" :key="index">{{ item.name }}</el-link>
                        </div>
                    </template>
                </el-table-column>
            </template>

            <template #order_status>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column :label="t('订单状态')" align="center" width="120">
                    <template #default="scope">
                        <div style="">
                            <el-dropdown>
                                <span class="el-dropdown-link" style="cursor: pointer;">
                                    <el-text v-if="scope.row.status == 0" type="danger" style="font-size: 13px;">{{ t('准备下单') }}</el-text>
                                    <el-text v-if="scope.row.status == 1" type="primary" style="font-size: 13px;">{{ t('已确认') }}</el-text>
                                    <el-text v-if="scope.row.status == 2" type="success" style="font-size: 13px;">{{ t('已发货') }}</el-text>
                                </span>
                                <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="changeStatus(scope, 0)" :disabled="scope.row.status == 0"><span style="border-radius: 1.5px; background: #f56c6c; width: 5px; height: 15px; margin-right: 12px;"></span>{{ t('准备下单') }}</el-dropdown-item>
                                    <el-dropdown-item @click="changeStatus(scope, 1)" :disabled="scope.row.status == 1"><span style="border-radius: 1.5px; background: #409eff; width: 5px; height: 15px; margin-right: 12px;"></span>{{ t('已确认') }}</el-dropdown-item>
                                    <el-dropdown-item @click="changeStatus(scope, 2)" :disabled="scope.row.status == 2"><span style="border-radius: 1.5px; background: #67c23a; width: 5px; height: 15px; margin-right: 12px;"></span>{{ t('已发货') }}</el-dropdown-item>
                                </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </template>
                </el-table-column>
            </template>

            <template #billing>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column :label="t('账单记录')" align="center" width="100">
                    <template #default="scope">
                        <div style="">
                            <span class="el-dropdown-link" style="cursor: pointer;" @click="state.checkBillId = scope.row.id">
                                <el-text type="info" style="font-size: 13px; display: block;">{{ t('查看账单') }}</el-text>
                            </span>
                        </div>
                        <div><el-text style="font-size: 13px;" type="danger" v-if="scope.row.paid <= 0">未付款</el-text></div>
                        <div><el-text style="font-size: 13px;" type="warning" v-if="scope.row.cost > scope.row.paid && scope.row.paid > 0">部分付款</el-text></div>
                        <div><el-text style="font-size: 13px;" type="success" v-if="scope.row.paid > 0 && scope.row.paid >= scope.row.cost">已付款</el-text></div>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <PopupForm />
        <Batch />
        <Download />

        <Detail v-if="state.clickContractId > 0" :order_id="state.clickContractId" @hideDetail="hideDetail"  />

        <OrderList v-if="state.clickRightId > 0" :order_id="state.clickRightId" @hideOrderList="hideOrderList"  />
        <CheckBill v-if="state.checkBillId > 0" :order_id="state.checkBillId" @hideCheckBill="hideCheckBill"  />

        <!-- <Quotation v-if="quotation.id != 0" :data="quotation" @closeViewQuotation="closeViewQuotation" /> -->

        <el-drawer
            v-model="state.information.drawer"
            size="1190"
            direction="ltr"
            class="information"
            :close-on-click-modal="true"
            :show-close="true"
            
        >

            <template #title>
                
                <div class="tag">
                    <span style="color: #333; font-size: 14px; font-weight: bold;">
                        {{ current_customer.name }}({{ current_customer.order_type }} / {{ current_customer.trade_type }})  
                    </span>
                    <span style="float: right; margin-right: 20px;">
                        <File v-if="state.information.form.order_id > 0" :order_id="state.information.form.order_id" @getFileFun="getFileFun" />
                    </span>
                </div>
                
            </template>
        
            <div id="information" v-loading="state.getFileLoading">
                
                <!-- 文件资料 -->
                <div class="ba-operate-form tag-0" style="padding: 0px 10px 0 10px;" v-if="state.information.tag == 0">
                    <!-- 进口 -->
                    <table v-if="current_customer.order_type == t('进口')" class="data-table" style="width: 100%;"> 
                        <tr style="background: #F5F5F6;">
                            <th style="width: 120px;">{{ t('分类') }}</th>
                            <th style="width: 150px;">{{ t('名称') }}</th>
                            <th style="width: 305px;" width="305">{{ t('文件') }}</th>
                            <th style="width: 80px;">{{ t('上传') }}</th>
                            <th style="width: 150px;">{{ t('名称') }}</th>
                            <th style="width: 305px;" width="305">{{ t('文件') }}</th>
                            <th style="width: 80px;">{{ t('上传') }}</th>
                        </tr>
                        <tr>
                            <td>{{ t('客户') }}</td>
                            <td>{{ t('合同') }}</td>
                            <td style="width: 305px;">
                                <div v-for="(item, index) in state.information.file.customer_contract" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_contract', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_contract'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('发票') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_cwfp" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_cwfp', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_cwfp'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="3">{{ t('供应商') }}</td>
                            <td>{{ t('合同') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_contract" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_contract', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_contract'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>PO</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_po" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_po', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_po'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>PI</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_pi" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_pi', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_pi'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>CI</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_ci" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_ci', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_ci'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>PL</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_pl" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_pl', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_pl'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('其他资料') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_other" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_other', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_other'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>{{ t('物流相关') }}</td>
                            <td>{{ t('报关单') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customs" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customs', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customs'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('其他资料') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.wl_other" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('wl_other', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'wl_other'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        
                    </table>
                    <table v-if="current_customer.order_type == t('出口')" class="data-table" style="width: 100%;">
                        <tr style="background: #F5F5F6;">
                            <th style="width: 120px;">{{ t('分类') }}</th>
                            <th style="width: 150px;">{{ t('名称') }}</th>
                            <th style="max-width: 300px;">{{ t('文件') }}</th>
                            <th style="width: 80px;">{{ t('上传') }}</th>
                            <th style="width: 150px;">{{ t('名称') }}</th>
                            <th style="width: 300px;">{{ t('文件') }}</th>
                            <th style="width: 80px;">{{ t('上传') }}</th>
                        </tr>
                        <tr>
                            <td rowspan="3">{{ t('客户') }}</td>

                            <td>{{ t('报价单') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_quotation" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_quotation', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_quotation'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            
                            <td>
                                {{ t('PI') }}
                                <div><el-link type="pimary" @click="ckGeneratePi()" style="font-size: 13px; color:#409eff;" target="_blank" class="file-name">{{ t('下载') + 'Excel' }}</el-link></div>
                            </td>
                            <td style="width: 300px;">
                                <div v-for="(item, index) in state.information.file.customer_pi" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_pi', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_pi'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        
                        <tr>
                            
                            <td>{{ t('合同') }}</td>
                            <td style="width: 300px;">
                                <div v-for="(item, index) in state.information.file.customer_contract" :key="index"  class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_contract', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_contract'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('CI') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_ci" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_ci', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_ci'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            
                        </tr>
                        <tr>
                            <td>{{ t('PL') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_pl" :key="index"  class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_pl', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_pl'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('其他资料') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_other" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_other', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_other'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        
                        <tr>
                            <td>{{ t('供应商') }}</td>
                            <td>
                                {{ t('合同') }}
                                <div><el-link type="pimary" @click="ckGenerateHt()" style="font-size: 13px; color:#409eff;" target="_blank" class="file-name">{{ t('下载') + 'Excel' }}</el-link></div>
                            </td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_contract" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_contract', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_contract'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('发票') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_invoice" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_invoice', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_invoice'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="1">{{ t('物流相关') }}</td>
                            <td>{{ t('报关单') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customs" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customs', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customs'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('其他资料') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.logistics_other" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('logistics_other', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'logistics_other'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                       
                    </table>
                    <table v-if="current_customer.order_type == t('内销')" class="data-table" style="width: 100%;">
                        <tr style="background: #F5F5F6;">
                            <th style="width: 120px;">{{ t('分类') }}</th>
                            <th style="width: 150px;">{{ t('名称') }}</th>
                            <th style="width: 300px;">{{ t('文件') }}</th>
                            <th style="width: 80px;">{{ t('上传') }}</th>
                            <th style="width: 150px;">{{ t('名称') }}</th>
                            <th style="width: 300px;">{{ t('文件') }}</th>
                            <th style="width: 80px;">{{ t('上传') }}</th>
                        </tr>
                        
                        <tr>
                            <td rowspan="2">{{ t('客户') }}</td>
                            <td>{{ t('报价单') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.quotation" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('quotaton', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'quotation'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('合同') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_contract" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_contract', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_contract'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>{{ t('发票') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_invoice" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_invoice', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_invoice'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('其他资料') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.customer_other" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('customer_other', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'customer_other'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>{{ t('供货商') }}</td>
                            <td>{{ t('合同') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_contract" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_contract', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_contract'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('发票') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.supplier_invoice" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('supplier_invoice', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'supplier_invoice'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>{{ t('物流公司') }}</td>
                            <td>{{ t('送货单') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.delivery" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('delivery', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'delivery'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                            <td>{{ t('其他资料') }}</td>
                            <td>
                                <div v-for="(item, index) in state.information.file.logistics_other" :key="index" class="file-td">
                                    <span><a :href="item.file_link" target="_blank" class="file-name" style="font-size: 13px;">{{ item.file_name }}</a></span>
                                    <span>
                                        <el-popconfirm :title="t('确定要删除这个文件吗') + '?'" @confirm="delFile('logistics_other', item)">
                                            <template #reference>
                                                <el-link type="danger" style="font-size: 13px; margin-left: 10px;">{{ t('删除') }}</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <FormItem 
                                    :input-attr="{ hideSelectFile: true, onSuccess: uploadFileSuccess(state.file, 'logistics_other'), showFileList: false, drag: true }" 
                                    type="files" 
                                    v-model="state.file" 
                                    style="margin-bottom: -13px; margin-top: 0px;"  
                                />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </el-drawer>

        
        

    </div>

    
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive, markRaw } from 'vue'


import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Batch from './batch.vue'
import Download from './download.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import router from '/@/router/index'
import { changeStatusApi, pullApi, changeDrawbackStatusApi } from '/@/api/most/customer/order'

import PayAmount from './render/pay_amount.vue';
import Note from './render/note.vue';
import BatchNumber from './render/batch_number.vue';

import { getProductApi, getProductInfoApi } from '/@/api/most/customer/product'

import { ckGeneratePiApi, ckGenerateHtApi, getGoodsHscodeApi, getHscodeSkuApi, delGoodsApi, getInformationGoodsApi, saveFileApi, getFileApi, saveInformationApi, saveInformationGoodsApi, updateInformationGoodsApi, generatePiNumApi, delFileApi } from '/@/api/most/business/information'

import { generateFileApi } from '/@/api/most/customer/generate'
import FormItem from '/@/components/formItem/index.vue'



import File from './file.vue';
import Detail from './detail/index.vue';
import OrderList from './list/index.vue';
import CheckBill from './check_bill/collection_record/index.vue';



defineOptions({
    name: 'customer_order/index',
})

const { t } = useI18n()
const tableRef = ref()

const current_customer = reactive({
    name: '',
    order_type: '',
    trade_type: '',
})




const state = reactive({
    clickContractId: 0,
    clickRightId: 0,
    checkBillId: 0,
    file: [],
    search: {
        invoice_status: null,
        keyword: null,
        drawback_status: null,
        create_time: null
    },
    pull: {
        pop: false,
        out_trade_no: ''
    },
    getFileLoading: false,
    loading: false,
    order_type: '',
    status: 0,
    pack_type: [], // 包装种类列表
    exemption: [], // 征免性质列表
    trade_term: [], // 成交方式
    regulated: [], // 监管方式
    destination: [], // 最终目的国
    trade_country: [], // 贸易国
    currency: [], // 货币
    customer: [],
    supplier: [],
    activeCustomer: 0,
    activeSupplier: 0,
    hsCode: [],
    goods: [],
    goodsForm: {},
    hscodeFormData: [],
    hscodeForm: {},
    information: {
        no: 0,
        id: 0,
        drawer: false,
        goods_drawer: false,
        goods_drawer_method: 'add',
        tag: 0,
        file: {
            
        },
        form: {
            order_id: 0
        },
        tableData: []
    }
    
});

// 生成客户pi
const ckGeneratePi = () => {
    console.log(state.information)
    ckGeneratePiApi({order_id: state.information.form.order_id}).then((e) => {
        console.log(e);
        window.open(e.data);
    })
}
// 生成供货商合同
const ckGenerateHt = () => {
    console.log(state.information)
    ckGenerateHtApi({order_id: state.information.form.order_id}).then((e) => {
        console.log(e);
        window.open(e.data);
    })
}


const handleRowContextmenu = (id: number) => {
    state.clickRightId = id;
}

const hideDetail = () => {
    state.clickContractId = 0;
}

const hideOrderList = () => {
    state.clickRightId = 0;
}
const hideCheckBill = () => {
    state.checkBillId = 0;
}

const searchInvoiceStatus = () => {
    baTable.table.filter!.invoice_status = state.search.invoice_status;
    baTable.table.filter!.page = 1

    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}

const inputKeyword = () => {
    baTable.table.filter!.keyword = state.search.keyword;
    baTable.table.filter!.create_time = state.search.create_time;
    // baTable.table.filter!.drawback_status = state.search.drawback_status;
    baTable.table.filter!.page = 1

    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
}



// .data[scope.row.nkey]
const uploadFileSuccess = (row: anyObj, type: string) => {
    return (file: anyObj) => {
        console.log(file)
        // if(row.type == 'buy_contract') state.file.buy_contract = row.file_url
        // row.file = row.file_url;
        let data = {
            order_id: state.information.form.order_id,
            file_url: state.file,
            type: type
        }
        saveFileApi(data).then((e) => {
            // row.value = e.data;
            state.file = [];
            getFileFun(state.information.form.order_id)
        })
        
    }
}

const delFile = (type: string, item: anyObj) => {
    delFileApi({order_id: state.information.form.order_id, type: type, file_id: item.id}).then((e) => {
        // row.value = e.data;
        getFileFun(state.information.form.order_id)
    })
}



// 打开资料管理
const openInformation = (row: anyObj) => {

    current_customer.name = row.customer.corp_name_ko;
    current_customer.order_type = t(row.order_type);
    current_customer.trade_type = t(row.trade_type);

    state.information.drawer = true;
    state.information.tag = 0;
    state.information.form = {};
    state.information.form.order_id = row.id;

    state.information.tableData = [];

    getFileFun(row.id)
}

const getFileFun = (order_id: number) => {
    state.getFileLoading = true;
    getFileApi({order_id: order_id}).then((e) => {
        state.getFileLoading = false;
        state.information.file = e.data.file;
    })
}



const changeDrawbackStatus = (scope: anyObj, status: number) => {
    
    // scope.row.status = status;
    changeDrawbackStatusApi({id: scope.row.id, drawback_status: status}).then((e) => {
        if(e.code == 1){
            scope.row.drawback_status = status;
        }
    })
}




const changeStatus = (scope: anyObj, status: number) => {
    
    // scope.row.status = status;
    changeStatusApi({id: scope.row.id, status: status}).then((e) => {
        if(e.code == 1){
            scope.row.status = status;
        }
    })
}



const edit = (scope: anyObj) => {
    baTable.onTableAction('edit', scope)
}

const add = (scope: anyObj) => {
    baTable.form.operate = 'AddProcess'
    baTable.form.items!.id = scope.row.id
    baTable.form.items!.name = scope.row.name
}

const del = (scope: anyObj) => {
    baTable.onTableAction('delete', scope)
}



/**
 * 切换类型
 */
const changeType = (type: string) => {
    state.order_type = type;
    baTable.table.filter!.order_type = type;
    baTable.table.filter!.customer_id = null;
    state.activeCustomer = 0;
    baTable.getIndex();
}

const changeCustomer = (customer_id: number) => {
    baTable.table.filter!.customer_id = customer_id;
    state.activeCustomer = customer_id;
    baTable.getIndex();
}

const changeSupplier = (supplier_id: number) => {
    baTable.table.filter!.supplier_id = supplier_id;
    state.activeSupplier = supplier_id;
    baTable.getIndex();
}


/**
 * 设置状态 
 */
const setStatus = (id: number, status: number, row: anyObj) => {
    let data = {id: id, status: status}
    setStatusApi(data).then((e) => {
        row.status = e.data.status;
        state.sub_status = e.data.sum_status
    })
}


let optButtons = defaultOptButtons([])


// 自定义一个新的按钮
let newButton: OptButton[] = [
    {
        render: 'basicButton', // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        name: 'edit',
        title: 'edit',
        text: t('编辑'),
        type: 'primary',
        class: 'btn btn-primary btn-small btn-sm ml-0 mt-5',
        icon: '',
    },{
        render: 'confirmButton',
        name: 'delete',
        title: '',
        text: t('删除'),
        type: 'danger',
        class: 'btn btn-danger ml--6 mt-5 btn-small',
        icon: '',
        popconfirm: {
            confirmButtonText: t('删除'),
            cancelButtonText: t('取消'),
            confirmButtonType: 'danger',
            title: t('确定要删除这条数据吗') + '?',
        }
    }
]

// 新按钮合入到默认的按钮数组
optButtons = newButton.concat(optButtons)

// const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

// 创建一个新的 Date 对象来获取当前日期
const currentDate = new Date();

// 获取年、月和日
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始计数，所以要加 1
const day = String(currentDate.getDate()).padStart(2, '0');

// 组合成 YYYY-MM-DD 格式的日期字符串
const formattedDate = `${year}-${month}-${day}`;

const showBatch = () => {
    baTable.form.items!.create_time = formattedDate;
    baTable.form.operate = 'Batch'
}


const download = () => {

    if(baTable.table.selection!.length <= 0) return;

    baTable.form.items!.ids = baTable.table.selection;

    baTable.form.operate = 'Download'


}

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/system/customer.Order/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { 
                label: t('类型'), 
                prop: 'trade_type', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                render: 'slot',
                slotName: 'trade_type'
            },
            { label: t('订单类型'), prop: 'customer.corp_name_ko', align: 'center', render: 'slot', slotName: 'order_type' },
            { label: t('客户名'), prop: 'customer.corp_name_ko', align: 'center', render: 'slot', slotName: 'customer_supplier' },
            { label: t('订单总价'), prop: 'amount_text', align: 'center',  sortable: false, width: 130 },
            { 
                label: t('付款金额'), 
                prop: 'pay_amount_text', 
                align: 'center',
                sortable: false,
                render: 'customRender', 
                customRender: markRaw(PayAmount),
                width: 130
            },
            { 
                label: t('订单状态'), 
                prop: 'order_status', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                render: 'slot',
                slotName: 'order_status'
            },
            { 
                label: t('备注'), prop: 'note', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false,
                render: 'customRender', 
                customRender: markRaw(Note),
            },
            { label: t('账单记录'), prop: 'billing', align: 'center', render: 'slot', slotName: 'billing' },
            // { label: t('批次号'), prop: 'batch_number', align: 'center', width: 80, render: 'customRender', customRender: markRaw(BatchNumber), },
            { label: t('下单时间'), prop: 'create_time', align: 'center', render: 'datetime', timeFormat: 'yy-mm-dd', width: 100 },
            { label: t('操作'), align: 'center', render: 'buttons', buttons: optButtons, operator: false, width: 100 },
        ],
        dblClickNotEditColumn: ['all'],
        defaultOrder: { prop: 'create_time', order: 'desc' },
    },
    {
        defaultItems: { create_time: formattedDate },
        

    },{
        
    },{
        getIndex: ({ res }: { res: ApiResponse }) => { // 查看后
            state.customer = res.data.customer;
            state.supplier = res.data.supplier;
            // console.log(res.data);
            // console.log(state.sub_status)
        },
        onSubmit: ({ res }: { res: ApiResponse }) => {
            if(res.data.type == 'download'){
                window.open(res.data.file_url)
            }
        },
        requestEdit: ({ res }: {res: ApiResponse}) => { // 编辑请求后
            console.log(res)
            baTable.form.items!.neixiao = res.data.row.order_type == '内销' ? true : false;
            baTable.form.items!.selectProductStatus = res.data.row.order_type != '内销' && res.data.row.customer_id > 0 ? false : true;

            if(res.data.row.order_type == '内销'){

            }else{
                let customer_id = res.data.row.customer_id;
                getProductApi({ customer_id: customer_id }).then((e) => {  // 获取产品列表。 
                    baTable.form.items!.product_list = e.data;
                })
            }

        }
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">

:deep(.el-image){
    // width: 60px;
    // height: 60px;
    width: unset;
    height: unset;
    // max-height: 100px;
    // max-width: 80px;
    // max-height: 80px;
}
:deep(td.business-name > div.cell) {
    min-height: 80px;
    display:flex;
    justify-content:center; 
    align-items:center;
}
.tian{
    cursor: pointer;
}
.tian:hover{
    color: #409EFF;
}

:deep(.el-image > img){
    // width: 60px;
    // height: 60px;
    width: unset;
    height: unset;
    // max-height: 100px;
    max-width: 80px;
    max-height: 80px;
}
:deep(.ba-data-table .btn){
    padding: 4px 14px;
}

.btn-supplier{
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

:deep(.ba-data-table .margin-left-none:last-child){
    margin-bottom: 0px;
}
:deep(.table-operate-text){
    padding-left: 0;
}
:deep(.font-size-13){
    font-size: 13px;
}
:deep(.pay-type .el-radio){
    margin-right: 10px;
}
pre{
    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
}
:deep(.ba-operate-dialog .el-dialog__body){
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
:deep(.quotation-scrollbar .el-scrollbar:first-child > .el-scrollbar__wrap){
    height: 100%;
}
:deep(.ml-0){
    margin-left: 0!important;
}
:deep(.mt-8){
    margin-top: 8px;
}
:deep(.ml--6){
    margin-left: -6px;
}
:deep(.ml-5){
    margin-left: 5px;
}
:deep(.mt-5){
    margin-top: 5px;
}
:deep(.el-button){
    height: unset;
}
:deep(.el-table__row.no-hover:hover .no-hover) {
  background-color: transparent!important; /* 使用 !important 来确保覆盖默认样式 */
  color: inherit !important;
//   background-color: red;
}
.tag{
    margin-right: 18px;
}

// .tag .active{
//     background: #ECF5FF;
//     color: #409EFF;
//     border: 1px solid #C6E2FF;
// }
:deep(.information .el-drawer__body){
    padding-top: 0;
}
:deep(.upload-column .el-form-item__label){
    display: none;
}
:deep(.upload-column .ba-upload.file){
    line-height: 8px;
}
:deep(.tag-0 .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
    border-top: 2px solid #efefef;
    border-right: 2px solid #efefef;

}

:deep(.information .el-table th.el-table__cell){
    background: rgb(245, 245, 246);
    color: #333;
    border-color: rgb(234, 234, 234);
}
:deep(.information .el-form--inline .el-form-item){
    margin-right: 23px;
}
:deep(.information .el-timeline-item){
    padding-bottom: unset;
}
:deep(.information .el-timeline-item__timestamp){
    font-size: 14px;
}
:deep(.el-button){
    height: unset;
}

:deep(.el-image > img){
    max-width: 50px;
    max-height: 50px;
}
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label){
    margin-bottom: 3px;
}
:deep(.information .el-drawer__header){
    margin-bottom: 17px!important;
}
:deep(.contract .el-link__inner){
    display: block;
}
.data-table tr th{
    padding: 12px 0;
    font-size: 13px;
    border: 1px solid #e2e2e2;
}
.data-table{
    border: 1px solid #efefef;
    border-collapse: collapse; 
}
.data-table tr td{
    text-align: center;
    padding: 16px 6px;
    border: 1px solid #e2e2e2;
    // border-collapse: collapse; 
}
:deep(.data-table .el-form-item__label){
    display: none;
}


:deep(.ba-operate-dialog-billing .el-dialog__body){
    height: calc(95vh - 56px);
}
:deep(.ba-operate-dialog-billing){
    margin-top: 2.5vh;
    width: 800px;
    max-width: 1500px;
}


:deep(.ba-operate-dialog-list .el-dialog__body){
    height: calc(95vh - 56px);
}
:deep(.ba-operate-dialog-list){
    margin-top: 2.5vh;
    width: 95%;
    max-width: 1500px;
}

:deep(.ba-operate-dialog-list-add .el-dialog__body){
    height: calc(30vh);    
}



:deep(.ba-operate-dialog-detail .el-dialog__body){
    height: calc(95vh - 56px);
}
:deep(.ba-operate-dialog-detail){
    margin-top: 2.5vh;
    width: 95%;
    max-width: 1500px;
}

:deep(.ba-operate-dialog-add .el-dialog__body){
    height: calc(30vh);    
}

.bbb span:first-child{
    // margin-left: 12px;
    margin-right: 12px;
}
.aaa > span{
    margin-right: 12px;
}
:deep(.el-upload-dragger){
    padding: 0;
    border: none;
}
.file-td{
    width: 300px;
    overflow-wrap: break-word;
}
.file-td a.file-name{
    color: #409eff;
    text-decoration: none;
    font-size: 13px;
}
.file-td a.file-name:hover{
    color: #54aaff;
    text-decoration: underline;
}
</style>
